<template>
    <div class="indexcontent">
        <pageHeader ref="header"></pageHeader>
        <div class="section option-section">
            <div class="section-main option-main">
                <div class="reg-modal" v-if="selectAuthorModal">
                    <div class="reg-overlay" @click="closeRegModal"></div>
                    <div class="clearfix reg-mcontent">
                        <router-link :to="{name:'Ukeypage'}" class="reg-miytem"><img src="@/assets/images/u856.png"
                                                                                     alt="" style="width: 85px;">UKEY授权
                        </router-link>
                        <router-link :to="{name:'Cloudpage'}" class="reg-miytem" style="margin-left: 35px;"><img
                                src="@/assets/images/u858.png"
                                style="width: 70px;">云签授权
                        </router-link>
                    </div>
                </div>
                <div class="pagerouter">
                    <router-link tag="a" :to="{name:'index'}" class="pagerouter-item pagerouter-a">首页</router-link>
                    <span class="pagerouter-arrow">></span>
                    <router-link tag="a" :to="{name:'Safecenter'}" class="pagerouter-item pagerouter-a">安全中心
                    </router-link>
                    <span class="pagerouter-arrow">></span>
                    <span class="pagerouter-item">安全设置-企业信息</span>
                </div>
                <div class="option-wrap">
                    <div class="option-tl">
                        <div class="option-tlsm">客户资料填写</div>
                        <div class="step-wrap">
                            <div class="clearfix step">
                                <div class="step-item step-first" :class="[stepActive>0?'step-active':'']">
                                    <div class="step-num">1</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">输入企业信息</div>
                                </div>
                                <div class="step-item step-defaultitem" :class="[stepActive>1?'step-active':'']">
                                    <div class="step-num">2</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">法人认证</div>
                                </div>
                                <div class="step-item step-last" :class="[stepActive>2?'step-active':'']">
                                    <div class="step-num">
                                        <img src="@/assets/images/u281.png" alt="" v-if="stepActive<=2">
                                        <img src="@/assets/images/u281_selected.png" alt="" v-else>
                                    </div>
                                    <div class="step-line"></div>
                                    <div class="step-words">完成</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="option-bd">
                        <swiper :options="swiperOption" ref="mySwiper">
                            <!-- slides -->
                            <!--<swiper-slide><img :src="bannerList[0].imgPath" alt="" style="width: 100%;display: block;">-->
                            <!--</swiper-slide>-->
                            <swiper-slide class="swiper-no-swiping">
                                <div class="clearfix option-float">
                                    <div class="option-fleft" style="border-right: 1px solid #1d8fe1;">
                                        <Form :model="companyForm" :label-width="240">
                                            <FormItem label="企业名称">
                                                <Input v-model="companyForm.companyName" placeholder="请输入企业名称"></Input>
                                            </FormItem>
                                            <FormItem label="统一社会信用代码">
                                                <Input v-model="companyForm.companyNum" placeholder="请输入统一社会信用代码"></Input>
                                            </FormItem>
                                            <FormItem label="企业所属行业">
                                                <Select v-model="companyForm.companyWay">
                                                    <Option value="beijing">New York</Option>
                                                    <Option value="shanghai">London</Option>
                                                    <Option value="shenzhen">Sydney</Option>
                                                </Select>
                                            </FormItem>
                                            <FormItem label="成立日期">
                                                <DatePicker type="date" placeholder="请选择"
                                                            v-model="companyForm.createDate"></DatePicker>
                                            </FormItem>
                                            <FormItem label="企业类型">
                                                <Select v-model="companyForm.companyType">
                                                    <Option value="beijing">New York</Option>
                                                    <Option value="shanghai">London</Option>
                                                    <Option value="shenzhen">Sydney</Option>
                                                </Select>
                                            </FormItem>
                                            <FormItem label="注册地区">
                                                <Cascader :data="cnCity" v-model="companyForm.companyArea" @on-change="changeArea"></Cascader>
                                            </FormItem>
                                            <FormItem label="详细地址">
                                                <Input v-model="companyForm.companyAdr" placeholder="请输入详细地址"></Input>
                                            </FormItem>
                                            <FormItem label="经营范围">
                                                <Input v-model="companyForm.companyRange" type="textarea"
                                                       :autosize="{minRows: 2,maxRows: 5}" placeholder="经营范围"></Input>
                                            </FormItem>
                                        </Form>

                                    </div>
                                    <div class="option-fright" style="border-left: 0;">
                                        <div class="option-fright-tl">营业执照上传</div>
                                        <div class="personal-idcard">
                                            <div class="personal-idcarditem">
                                                <Upload
                                                        ref="upload"
                                                        :show-upload-list="false"
                                                        :on-success="handleSuccess"
                                                        :format="['jpg','jpeg','png']"
                                                        :max-size="2048"
                                                        :on-format-error="handleFormatError"
                                                        :on-exceeded-size="handleMaxSize"
                                                        :before-upload="handleBeforeUpload"
                                                        multiple
                                                        type="select"
                                                        action="//jsonplaceholder.typicode.com/posts/"
                                                        style="display: inline-block;width:150px;">
                                                    <div>
                                                        <img src="@/assets/images/per-icon3.png" alt="">
                                                    </div>
                                                </Upload>
                                            </div>
                                        </div>
                                        <div class="person-iddes">
                                            <div>• 必须为清晰、完整的彩色原件扫描件或数码照</div>
                                            <div>• 仅支持.jpg .bmp .png .gif的图片格式,大小不超过4M</div>
                                            <div>• 必须在有效期内且年检章齐全</div>
                                            <div>• 必须为中国大陆工商局颁发</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="optionbtnwrap">
                                    <div class="option-errtips" v-if="errtipshow">该账户已存在</div>
                                    <button type="button" class="option-next" @click="toStepTwo">下一步</button>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="clearfix option-float">
                                    <div class="option-fleft">
                                        <Form :model="legalForm" :label-width="240">
                                            <FormItem label="法人姓名">
                                                <Input v-model="legalForm.legalName" placeholder="请输入法人姓名"></Input>
                                            </FormItem>
                                            <FormItem label="法人证件号码">
                                                <Input v-model="legalForm.legalNum" placeholder="请输入法人证件号码"></Input>
                                            </FormItem>
                                            <FormItem label="证件有效日期">
                                                <DatePicker type="date" placeholder="请选择"
                                                            v-model="legalForm.legalIdcardDate"></DatePicker>
                                            </FormItem>
                                            <FormItem label="企业法人电话">
                                                <Input v-model="legalForm.legalPhone" placeholder="请输入企业法人电话"></Input>
                                            </FormItem>
                                            <FormItem label="法人证件号码">
                                                <Input v-model="legalForm.legalIdcardNum" placeholder="请输入验证码"></Input>
                                                <div class="optiongetcode" :class="[readyget?'ungetcode':'']"
                                                     @click="tapGetCode">{{codeWords}}
                                                </div>
                                            </FormItem>
                                        </Form>

                                    </div>
                                    <div class="option-fright">
                                        <div class="option-fright-tl">身份证上传</div>
                                        <div class="personal-idcard">
                                            <div class="personal-idcarditem">
                                                <Upload
                                                        ref="upload"
                                                        :show-upload-list="false"
                                                        :on-success="handleSuccess"
                                                        :format="['jpg','jpeg','png']"
                                                        :max-size="2048"
                                                        :on-format-error="handleFormatError"
                                                        :on-exceeded-size="handleMaxSize"
                                                        :before-upload="handleBeforeUpload"
                                                        multiple
                                                        type="select"
                                                        action="//jsonplaceholder.typicode.com/posts/"
                                                        style="display: inline-block;width:150px;">
                                                    <div>
                                                        <img src="@/assets/images/per-icon1.png" alt="">
                                                    </div>
                                                </Upload>
                                            </div>
                                            <div class="personal-idcarditem"
                                                 style="border-top: 1px dashed #ccc;margin-top: 10px;width: 170px;">
                                                <Upload
                                                        ref="upload"
                                                        :show-upload-list="false"
                                                        :on-success="handleSuccess"
                                                        :format="['jpg','jpeg','png']"
                                                        :max-size="2048"
                                                        :on-format-error="handleFormatError"
                                                        :on-exceeded-size="handleMaxSize"
                                                        :before-upload="handleBeforeUpload"
                                                        multiple
                                                        type="select"
                                                        action="//jsonplaceholder.typicode.com/posts/"
                                                        style="display: inline-block;width:150px;">
                                                    <div>
                                                        <img src="@/assets/images/per-icon2.png" alt="">
                                                    </div>
                                                </Upload>
                                            </div>
                                        </div>
                                        <div class="person-iddes">
                                            <div>• 必须为清晰、完整的彩色原件扫描件或数码照</div>
                                            <div>• 仅支持.jpg .bmp .png .gif的图片格式,大小不超过4M</div>
                                            <div>• 必须在有效期内且年检章齐全</div>
                                            <div>• 必须为中国大陆工商局颁发</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="optionbtnwrap">
                                    <div class="option-errtips" v-if="errtipshow">输入错误</div>
                                    <button type="button" class="option-next" @click="toStepThree">下一步</button>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-success">
                                    <img src="@/assets/images/u1009.png" alt="" class="option-success-img">
                                    <div class="option-success-words">恭喜你，注册完成</div>
                                    <div class="option-success-tips">点击下方按钮前往授权</div>
                                    <div class="option-success-btn">
                                        <button type="button" @click="tapToSelect">前往授权</button>
                                    </div>
                                </div>
                            </swiper-slide>
                            <!--                        <swiper-slide v-for="(item,index) in bannerList" :key="index" class="swiper-no-swiping">-->
                            <!--                            ssssss{{item}}-->
                            <!--                        </swiper-slide>-->
                            <!-- Optional controls -->
                            <!--                        <div class="swiper-pagination" slot="pagination"></div>-->
                        </swiper>
                    </div>
                    <div class="option-ft">

                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="modal2" width="700">
            <p slot="header" class="hasinfomodal-tl">
                <span>系统检测到您的企业信息已存在</span>
            </p>
            <div class="hasinfomodal-bd">
                <div class="hasinfo-af">您可以通过如下方式开通权限</div>
                <div class="hasinfo-des">
                    <div>1、联系企业管理员开通，管理员姓名：*大宝        手机号：177****0177</div>
                    <div>2、进入“认证流程”获取企业操作权限</div>
                    <div>3、如果管理员离职，可以通过“人工申述”变更企业管理员，详询400-188-8888</div>
                </div>
            </div>
            <div slot="footer" class="hasinfomodal-ft">
                <button type="button" style="background-color: #996699">通知管理员</button>
                <button type="button" style="background-color: #666;margin-left: 20px;">立即认证</button>
            </div>
        </Modal>
        <pageFooter/>
    </div>
</template>

<script>
    import pageHeader from '@/components/pageHeader'
    import pageFooter from '@/components/pageFooter'

    var json = require('@/lib/cncity/provinces.json');
    import {mapMutations} from 'vuex'

    let timeInterval = null;
    let routerInterval = null;
    export default {
        name: "optionforenterprise",
        components: {
            pageHeader,
            pageFooter
        },
        data() {
            return {
                swiperOption: {
                    autoplay: false,
                    loop: false,
                    noSwiping: true,
                    // pagination: '.swiper-pagination'
                },
                routerTime: 5,
                stepActive: 1,
                errtipshow: false,
                companyForm:{
                    companyName:'',
                    companyNum:'',
                    companyWay:'',
                    createDate:'',
                    companyType:'',
                    companyArea:[],
                    companyAdr:'',
                    companyRange:'',
                },
                legalForm: {
                    legalName: '',
                    legalNum: '',
                    legalIdcardDate: '',
                    legalPhone: '',
                    legalIdcardNum: '',
                },
                readyget: false,
                codeWords: '获取验证码',
                time: 10,
                cnCity: json.data,
                selectAuthorModal: false,
                modal2:false
            }
        },
        created() {
            this.showHasModal()
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },

        mounted() {

        },
        beforeDestroy() {
            clearInterval(timeInterval)
            clearInterval(routerInterval)
        },
        methods: {
            tapGetCode() {
                if (!this.readyget) {
                    timeInterval = setInterval(() => {
                        if (this.time > 0) {
                            this.readyget = true;
                            this.time = this.time - 1;
                            this.codeWords = this.time + '秒后可重发'
                            console.log(this.time)
                        } else {
                            clearInterval(timeInterval)
                            this.time = 10;
                            this.codeWords = '获取验证码'
                            this.readyget = false;
                        }
                    }, 1000)
                }
            },
            toStepTwo() {
                this.swiper.slideTo(1, 1000, false)
                this.stepActive = 2
            },
            toStepThree() {
                this.swiper.slideTo(2, 1000, false)
                this.stepActive = 3
                // routerInterval = setInterval(() => {
                //     if (this.routerTime > 0) {
                //         this.routerTime = this.routerTime - 1;
                //     } else {
                //         clearInterval(timeInterval)
                //         this.$router.push({
                //             name:'Login'
                //         })
                //     }
                // }, 1000)
            },
            tapToSelect() {
                this.selectAuthorModal = true;
            },
            closeRegModal() {
                this.selectAuthorModal = false;
            },
            showHasModal(){
                console.log('modal')
            },
            handleSuccess (res, file) {
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload () {
                // const check = this.uploadList.length < 5;
                // if (!check) {
                //     this.$Notice.warning({
                //         title: 'Up to five pictures can be uploaded.'
                //     });
                // }
                // return check;
            },
            changeArea(e){
                console.log(e);
                console.log(this.companyForm.companyArea)
            }
        }
    }
</script>

<style scoped lang="scss">
    .hasinfomodal-tl{
        font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: rgb(102, 102, 102);
        text-align: left;
        line-height: 20px;
    }
    .hasinfomodal-bd{
    color:#666;
     .hasinfo-af{font-size: 16px;}
     .hasinfo-des{line-height: 30px;padding: 15px 25px;}
    }
    .hasinfomodal-ft{
        button{width: 125px;height: 40px;border: none;color: #fff;
            -webkit-border-radius:3px;
            -moz-border-radius:3px;
            border-radius:3px;}
    }
</style>

